<template>
  <div class="page-container" style="min-width: 1170px">
    <ex_super_form
      id="page_order_create"
      ref="form"
      v-bind="formOption"
      v-loading="loading"
      class="common-form-row common-form-panel-div-right"
      label-position="right"
      label-width="140px"
    >
    </ex_super_form>
  </div>
</template>

<script>
import router_params from "@/mixin/router_params";
export default {
  title: "label_workorder_detail",
  mixins: [router_params],
  data() {
    return {
      loading: false,

      formOption: {
        model: [
          { header: "工单信息" },
          {
            elRowCol: [
              {
                key: "code",
                label: "工单编号",
                formType: "text",
                // formatter: (r, c, v, i) => this.$formatNameCode(v, r.customerCode),
              },
              {
                key: "customerName",
                label: "客户名称",
                formType: "text",
              },
              {
                key: "status",
                label: "状态",
                formType: "text",
                formatter: (r, c, v, i) => {
                  const val_ = this.$localEnum.TicketsStatusEnum.find((el) => {
                    return el.value === r.status;
                  });
                  return val_ ? val_.label : r.status;
                },
              },
            ],
          },
          {
            elRowCol: [
              {
                key: "type",
                label: "工单类型",
                formType: "text",
                formatter: (r, c, v, i) => {
                  const val_ = this.$localEnum.TicketsTypeEnum.find((el) => {
                    return el.value === r.type;
                  });
                  return val_ ? val_.label : r.type;
                },
              },
              {
                key: "ticketsCatalogName",
                label: "工单目录",
                formType: "text",
              },
              {
                key: "description",
                label: "工单详情描述",
                formType: "text",
              },
            ],
          },
          {
            elRowCol: [
              // {
              //   key: "handleType",
              //   label: "反馈方式",
              //   formType: "text",
              //   formatter: (r, c, v, i) => this.$enumShow(v, "TicketsTypeEnum"),
              // },
              {
                key: "author",
                label: "提报人",
                formType: "text",
              },
              {
                key: "gmtSubmit",
                label: "提报时间",
                formType: "text",
                formatter: (r, c, v, i) => this.$dateFormat(v),
              },
              {
                key: "urgency",
                label: "紧急程度",
                formType: "text",
                formatter: (r, c, v, i) => {
                  const val_ = this.$localEnum.TicketsUrgencyEnum.find((el) => {
                    return el.value === r.urgency;
                  });
                  return val_ ? val_.label : r.urgency;
                },
              },
            ],
          },
          {
            elRowCol: [
              {
                key: "userDeptName",
                label: "跟进部门",
                formType: "text",
              },
              {
                key: "userRoleName",
                label: "跟进角色",
                formType: "text",
              },
              {
                key: "follower",
                label: "跟进人",
                formType: "text",
              },
            ],
          },
          {
            elRowCol: [
              {
                key: "gmtFollow",
                label: "跟进时间",
                formType: "text",
                formatter: (r, c, v, i) => this.$dateFormat(v),
              },
              // {
              //   key: "remark",
              //   label: "工单备注",
              //   formType: "text",
              // },
              {
                key: "uploadFiles",
                label: "上传图片",
                type: "upload-file",
                render: (h, { data }) => {
                  return h("ex-upload-file", {
                    props: {
                      limit: 3,
                      disabled: true,
                      readonly: true,
                      value: data.uploadFiles,
                    },
                  });
                },
              },
              {
                key: "businessClassify",
                label: "业务类型",
                formType: "text",
                formatter: (r, c, v, i) => {
                  const val_ = this.$localEnum.TicketsBusinessClassifyEnum.find((el) => {
                    return el.value === r.businessClassify;
                  });
                  return val_ ? val_.label : r.businessClassify;
                },
              },
            ],
          },
          {
            elRowCol: [
              //   {
              //     key: "uploadFiles",
              //     label: "上传图片",
              //     formType: "text",
              //   },

              {
                key: "businessCode",
                label: "业务单号",
                formType: "text",
              },
            ],
          },

          { header: "核查反馈记录" },
          {
            key: "verifyRecordDTOS",

            formType: "table",
            itemAttrs: {
              "label-width": "0",
            },
            attrs: {
              height: 300,
            },
            model: [
              {
                key: "serialNum",
                label: "序号",
                width: 100,
                "show-overflow-tooltip": true,
              },
              // {
              //   key: "verifyResponsiblePerson",
              //   label: "判断责任方",
              //   "min-width": 150,
              //   "show-overflow-tooltip": true,
              //   formatter: (r, c, v, i) => {
              //     const val_ = this.$localEnum.TicketsResponsiblePersonEnum.find((el) => {
              //       return el.value === r.verifyResponsiblePerson;
              //     });
              //     return val_ ? val_.label : r.verifyResponsiblePerson;
              //   },
              // },
              {
                key: "verifyDesc",
                label: "核查描述",
                width: 130,
                "show-overflow-tooltip": true,
              },
              {
                key: "verifyUploadFiles",
                label: "是否上传文件",
                width: 110,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => {
                  return r.verifyUploadFiles && r.verifyUploadFiles.length > 0
                    ? "是"
                    : "否";
                },
              },
              {
                key: "verifyUploadFiles",
                label: "上传附件",
                "show-overflow-tooltip": true,
                type: "upload-file",
                render: (h, { row }) => {
                  return h("ex-upload-file", {
                    props: {
                      limit: 3,
                      disabled: true,
                      readonly: true,
                      value: row.verifyUploadFiles,
                    },
                  });
                },
              },
              {
                key: "feedbackPerson",
                label: "反馈人员",
                width: 150,
                "show-overflow-tooltip": true,
              },
              {
                key: "gmtFeedback",
                label: "反馈时间",
                width: 150,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => this.$dateFormat(v),
              },
            ],
          },
          { header: "工单处理记录" },

          {
            key: "handleRecordDTOS",
            formType: "table",
            itemAttrs: {
              "label-width": "0",
            },
            attrs: {
              height: 300,
            },
            model: [
              {
                key: "serialNum",
                label: "序号",
                width: 100,
                "show-overflow-tooltip": true,
              },
              {
                key: "ifResponsible",
                label: "是否有责",
                "min-width": 150,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => {
                  const val_ = this.$localEnum.YesOrNoEnum_CN.find(
                    (el) => el.value === r.ifResponsible
                  );
                  return val_ ? val_.label : r.ifResponsible;
                },
              },
              {
                key: "handleType",
                label: "处理方式",
                width: 140,
                "show-overflow-tooltip": true,
              },
              //   {
              //     key: "",
              //     label: "处理箱数",
              //     width: 150,
              //     "show-overflow-tooltip": true
              //   },
              //   {
              //     key: "",
              //     label: "处理件数",
              //     width: 150,
              //     "show-overflow-tooltip": true
              //   },
              {
                key: "ifCompensation",
                label: "是否产生赔偿",
                width: 150,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => {
                  return r.ifCompensation === "Y" ? "是" : "否";
                },
              },
              {
                key: "compensationAmount",
                label: "赔偿金额",
                width: 150,
                "show-overflow-tooltip": true,
              },
              {
                key: "handlePerson",
                label: "处理人员",
                width: 150,
                "show-overflow-tooltip": true,
              },
              {
                key: "gmtHandle",
                label: "处理时间",
                width: 150,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => this.$dateFormat(v),
              },
              {
                key: "modifier",
                label: "更新人",
                width: 150,
                "show-overflow-tooltip": true,
              },
              {
                key: "gmtModify",
                label: "更新时间",
                width: 150,
                "show-overflow-tooltip": true,
                formatter: (r, c, v, i) => this.$dateFormat(v),
              },
            ],
          },
        ],
      },
    };
  },

  methods: {
    fixTabLabel(code) {
      this.$emit("tagModifyLabel", {
        _key: "label_name_code",
        name: "工单详情",
        code: code,
      });
    },
    init_order(id) {
      this.loading = true;
      let data = {
        id,
      };
      this.$ajax({
        url: this.$url["oms/WorkorderDetail"],
        method: "post",
        data,
        success: (res) => {
          if (!res.data) return this.$message.error(this.$tt("label_data_loss"));
          this.$refs.form.setData(res.data);
          this.loading = false;
          this.fixTabLabel(res.data.code);
        },
      });
    },
    init_data_default(params) {
      this.init_order(params.id);
    },
  },
};
</script>

<style lang="scss" scoped>
.common-form-row >>> .hg-upload-wrap {
  .item {
    width: 100%;
  }
}
</style>
